<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 方块 */
			#oDiv{
				width: 10px;
				height: 50px;
				background: red;
				position: absolute;
				left: 0;
			}
			
			/* 终点线 */
			.line{
				position: absolute;
				left: 500px;
				width: 2px;
				height: 500px;
				background-color: black;
			}
		</style>
		
		<script>
			window.onload = function()
			{
				let btn = document.querySelectorAll('button');
				let start = btn[0];
				let timeout = btn[1];
				let div = document.querySelector('#oDiv');
				let i = 0;
				let timer;
				 start.onclick = function()
				 {	
					timer = window.setInterval(function(){
						 // div.style.width = i + 'px';
						 if(div.offsetLeft == 500)
						 {
						 	window.clearInterval(timer);
						 }
						 else
						 {
							i = Math.ceil((500 - div.offsetLeft) / 10);
							div.style.left = div.offsetLeft + i + 'px';
						 }
					 },30);
				 }
				 
				 timeout.onclick = function()
				 {
					 window.clearInterval(timer);
				 }
			}
		</script>
	</head>
	<body>
		<button>开始</button>
		<button>暂停</button>
		<div id="oDiv"></div>
		<div class="line"></div>
	</body>
</html>